import React,{Component} from 'react';
import {Row,Col,Table,Form,Input,Select, Button} from 'antd';
import './style.scss';

class fileApplication extends Component{

    formRef=React.createRef();
    componentDidMount(){
        this.props.onRef(this)
    }
    render(){
        const columns=[
            {
                title:'编码',
                key:'index',
                dataIndex:'index',
                width:60
            },
            {
                title:'文件名称',
                key:'fileName',
                dataIndex:'fileName',
                width:100
            },
            {
                title:'文件描述',
                key:'fileDesc',
                dataIndex:'fileDesc',
                width:100
            },
            {
                title:'目标路径',
                key:'targetPath',
                dataIndex:'targetPath',
                render:(text, record, index)=>{
                    return <Input placeholder='请输入文件路径'/>
                }
            }
        ]
        const dataSource=[
            {
                index:'1',
                fileName:'qwe',
                fileDesc:'规划科',
            },
            {
                index:'2',
                fileName:'qwe',
                fileDesc:'规划科',
            },
            {
                index:'3',
                fileName:'qwe',
                fileDesc:'规划科',
            },
            {
                index:'4',
                fileName:'qwe',
                fileDesc:'规划科',
            },
            {
                index:'5',
                fileName:'qwe',
                fileDesc:'规划科',
            },
            {
                index:'6',
                fileName:'qwe',
                fileDesc:'规划科',
            },
        ]
        const rules={required:true};
        const style={color:'rgb(0,126,220)'};
        return(
            <div className='dbApplication'>
                <p style={{fontSize:13,fontWeight:'bold',color:'#4ea6a6'}}>资源申请<span className='line'></span></p>
                <Form labelCol={{span:6}} wrapperCol={{span:15}} colon={false} ref={this.formRef}>
                    <Row>
                        <Col span={12}>
                            <Form.Item label={<span style={style}>任务名称</span>} name='taskName'>
                                <Input placeholder='请输入任务名称'/>
                            </Form.Item>
                            <Form.Item label={<span style={style}>资源名称</span>} >
                                <span className='dataSpan'>人口基本资源目录</span>
                            </Form.Item>
                            <Form.Item label={<span style={style}>提供方</span>}>
                                <span className='dataSpan'>公安局</span>
                            </Form.Item>
                            <Form.Item label={<span style={style}>描述</span>}  name='desc' wrapperCol={{span:20}} labelCol={{span:24}}>
                                <Input.TextArea />
                            </Form.Item>
                        </Col>
                        <Col span={12}>
                            <Form.Item label={<span style={style}>需求方</span>}>
                                <span className='dataSpan'>交通局</span>
                            </Form.Item>
                            <Form.Item label={<span style={style}>接收节点</span>}  name='receivingNode'>
                                <Select defaultValue='TransportationBureau'>
                                    <Select.Option value='TransportationBureau'>交通局前置机</Select.Option>
                                </Select>
                            </Form.Item>
                            <Form.Item label={<span style={style}>开始时间</span>}  name='startTime'>
                                <Input placeholder='年/月/日'/>
                            </Form.Item>
                            <Form.Item label={<span style={style}>结束时间</span>}  name='endTime'>
                                <Input placeholder='年/月/日'/>
                            </Form.Item>
                        </Col>
                    </Row>
                </Form>
                <p style={{fontSize:13,fontWeight:'bold',color:'#4ea6a6'}}>文件目录关联映射<span className='line' style={{width:'86%'}}></span></p>
                <Table
                    columns={columns}
                    dataSource={dataSource}
                    pagination={false}
                    scroll={{
                        y:300
                    }}
                    bordered={true}
                />
            </div>
        )
    }
}
export default fileApplication;